'use client'

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import {
  IconActivity,
  IconUsers,
  IconBed,
  IconAlertTriangle,
  IconTrendingUp,
  IconMap,
  IconPlayerPlay,
  IconChevronRight,
  IconEye
} from "@tabler/icons-react"
import { useI18n } from "@jjk/guo"

// 按设计文档要求的主页KPI和快捷操作
export default function MainHomePage() {
  const router = useRouter()
  const { t } = useI18n()
  const [kpiData, setKpiData] = useState({
    avgWait: 32,
    maxDensity: 3.8,
    bottlenecks: 5,
    activeAlerts: 3
  })

  // 模拟热力图缩略数据
  const miniHeatmap = Array.from({ length: 25 }, (_, i) => ({
    id: i,
    intensity: Math.random() * 100
  }))

  // 快捷操作
  const quickActions = [
    {
      title: "启动仿真",
      description: "开始新的人流仿真",
      icon: IconPlayerPlay,
      action: () => router.push('/viewer'),
      color: "bg-blue-500"
    },
    {
      title: "场景预设",
      description: "选择预设场景",
      icon: IconActivity,
      action: () => router.push('/optimization'),
      color: "bg-green-500"
    },
    {
      title: "应急疏散",
      description: "启动疏散模拟",
      icon: IconAlertTriangle,
      action: () => router.push('/viewer?mode=emergency'),
      color: "bg-red-500"
    }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* 顶部状态栏 */}
      <div className="bg-white border-b px-6 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">医疗空间数字孪生</h1>
            <p className="text-slate-600">实时监控 · 人流仿真 · 优化建议</p>
          </div>
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            系统正常
          </Badge>
        </div>
      </div>

      <div className="p-6 space-y-6">
        {/* 关键KPI卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card className="bg-white/80 backdrop-blur">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-sm font-medium text-slate-600">
                <IconActivity className="w-4 h-4" />
                平均等待时间
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-slate-900">{kpiData.avgWait}分</div>
              <div className="flex items-center gap-1 text-sm text-orange-600">
                <IconTrendingUp className="w-3 h-3" />
                较昨日 +8%
              </div>
            </CardContent>
          </Card>

          <Card className="bg-white/80 backdrop-blur">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-sm font-medium text-slate-600">
                <IconUsers className="w-4 h-4" />
                峰值人流密度
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-slate-900">{kpiData.maxDensity}</div>
              <div className="flex items-center gap-1 text-sm text-green-600">
                <IconTrendingUp className="w-3 h-3" />
                处于正常范围
              </div>
            </CardContent>
          </Card>

          <Card className="bg-white/80 backdrop-blur">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-sm font-medium text-slate-600">
                <IconBed className="w-4 h-4" />
                识别瓶颈点
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-slate-900">{kpiData.bottlenecks}个</div>
              <div className="flex items-center gap-1 text-sm text-slate-500">
                <IconEye className="w-3 h-3" />
                <button 
                  onClick={() => router.push('/heatmap')}
                  className="text-blue-600 hover:underline"
                >
                  查看详情
                </button>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-white/80 backdrop-blur">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-sm font-medium text-slate-600">
                <IconAlertTriangle className="w-4 h-4" />
                待处理告警
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-slate-900">{kpiData.activeAlerts}条</div>
              <div className="flex items-center gap-1 text-sm text-red-600">
                <button 
                  onClick={() => router.push('/alerts')}
                  className="text-red-600 hover:underline"
                >
                  立即处理
                </button>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 热力图缩略和快捷操作 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 热力图缩略 */}
          <Card className="bg-white/80 backdrop-blur">
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>实时热力图</span>
                <Button 
                  variant="outline" 
                  size="sm"
                  onClick={() => router.push('/heatmap')}
                >
                  <IconMap className="w-4 h-4 mr-2" />
                  全屏查看
                </Button>
              </CardTitle>
              <CardDescription>当前楼层人流分布</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-5 gap-1 h-32">
                {miniHeatmap.map((cell) => (
                  <div
                    key={cell.id}
                    className="rounded transition-colors cursor-pointer"
                    style={{
                      backgroundColor: `hsl(${240 - cell.intensity * 2.4}, 70%, ${85 - cell.intensity * 0.3}%)`
                    }}
                    onClick={() => router.push(`/viewer?t=${Date.now()}&cell=${cell.id}`)}
                  />
                ))}
              </div>
              <div className="flex justify-between text-xs text-slate-500 mt-2">
                <span>低密度</span>
                <span>高密度</span>
              </div>
            </CardContent>
          </Card>

          {/* 快捷操作 */}
          <Card className="bg-white/80 backdrop-blur">
            <CardHeader>
              <CardTitle>快捷操作</CardTitle>
              <CardDescription>一键启动常用功能</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {quickActions.map((action, index) => (
                <Button
                  key={index}
                  variant="outline"
                  className="w-full justify-start h-auto p-4"
                  onClick={action.action}
                >
                  <div className={`w-10 h-10 rounded-lg ${action.color} flex items-center justify-center mr-3`}>
                    <action.icon className="w-5 h-5 text-white" />
                  </div>
                  <div className="text-left">
                    <div className="font-medium">{action.title}</div>
                    <div className="text-sm text-slate-500">{action.description}</div>
                  </div>
                  <IconChevronRight className="w-4 h-4 ml-auto text-slate-400" />
                </Button>
              ))}
            </CardContent>
          </Card>
        </div>

        {/* 最近告警 */}
        <Card className="bg-white/80 backdrop-blur">
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <span>最近告警</span>
              <Button 
                variant="outline" 
                size="sm"
                onClick={() => router.push('/alerts')}
              >
                查看全部
              </Button>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { level: 'high', message: '1F药房队列过长', time: '2分钟前', location: '1F-药房A' },
                { level: 'medium', message: '2F候诊区人流密度偏高', time: '5分钟前', location: '2F-内科候诊' },
                { level: 'low', message: '3F通道轻微拥堵', time: '8分钟前', location: '3F-走廊C' }
              ].map((alert, index) => (
                <div key={index} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                  <div className="flex items-center gap-3">
                    <Badge 
                      variant={alert.level === 'high' ? 'destructive' : alert.level === 'medium' ? 'default' : 'secondary'}
                      className="text-xs"
                    >
                      {alert.level === 'high' ? '高' : alert.level === 'medium' ? '中' : '低'}
                    </Badge>
                    <div>
                      <div className="font-medium text-sm">{alert.message}</div>
                      <div className="text-xs text-slate-500">{alert.location} · {alert.time}</div>
                    </div>
                  </div>
                  <Button 
                    variant="ghost" 
                    size="sm"
                    onClick={() => router.push(`/viewer?alert=${index}&location=${encodeURIComponent(alert.location)}`)}
                  >
                    定位
                  </Button>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}